import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  Image,
  Platfrom,
  BackAndroid,
  ToastAndroid
} from 'react-native';

import PageOne from './pageOne';

import PageOneContainer from '../containers/PageOneContainer';
import PageTwoContainer from '../containers/PageTwoContainer';
import CCNavigator from '../plugin/CCNavigator';
import TabNavigator from 'react-native-tab-navigator';

const PAGEONE = 'PageOne';
const PAGEONE_TITLE = '第一页';
const PAGETWO = 'PageTwo';
const PAGETWO_TITLE = '第二页';

export default class Root extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: PAGEONE
    };
  }

  _selectedTabView(tag) {
    this.setState({selectedTab: tag});
  }

  _renderTabItem(data, childView) {
    return (
      <TabNavigator.Item
        selected={this.state.selectedTab === data.tag}
        title={data.title}
        titleStyle={styles.title}
        selectedTitleStyle={styles.titleFocus}
        renderIcon={() => <Image source={data.normalIcon}/>}
        renderSelectedIcon={() => <Image source={data.focusIcon}/>}
        onPress={() => {this._selectedTabView(data.tag)}} >
        {childView}
      </TabNavigator.Item>
    );
  }
  _renderPageOneTab() {
    var tabData = {
      'title': PAGEONE_TITLE,
      'tag': PAGEONE
    };
    return this._renderTabItem(tabData,
      <CCNavigator
        rootComponent={PageOneContainer}
        {...this.props}
        ref={(ref) => {this.homeNav = ref}} />
    )
  }

  _renderPageTwoTab() {
    var tabData = {
      'title': PAGETWO_TITLE,
      'tag': PAGETWO
    };
    return this._renderTabItem(tabData,
      <CCNavigator
        rootComponent={PageTwoContainer}
        {...this.props}
        ref={(ref) => {this.homeNav = ref}} />
    )
  }

  render(){

    let tabBarStyle = {};
    let sceneStyle = {};

    if (!this.props.tabbarHidden) {
      tabBarStyle.height = 50
      tabBarStyle.backgroundColor='#fff'
      tabBarStyle.alignItems='center'
      sceneStyle.paddingBottom = 50;
    } else {
      sceneStyle.paddingBottom = 0;
      tabBarStyle.height = 0
      tabBarStyle.overflow='hidden'
      tabBarStyle.backgroundColor='#fff'
      tabBarStyle.alignItems='center'
    }

    console.log('hidde style',tabBarStyle);

    return(
      <View style={{flex: 1}}>
        <TabNavigator
          tabBarStyle={tabBarStyle}
          sceneStyle={sceneStyle}
          hidesTabTouch={true}>

          {this._renderPageOneTab()}
          {this._renderPageTwoTab()}

        </TabNavigator>
      </View >
    )
  }
}

const styles = StyleSheet.create({
    hiddenTab: {
        height:0,
        overflow: 'hidden',
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    showTab:{
        height:50,
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    title:{
        fontSize: 10,
        color:'#666'
    },
    titleFocus:{
        fontSize:10,
        color:'#f15452'
    }
});
